<!DOCTYPE html>
<html>
<head>
   <title>文件管理页面</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
   <script src="/static/js/tinymce/tinymce.min.js"></script>
    <script src="/static/js/tinymce/plugins/table/plugin.min.js"></script>
    <script src="/static/js/tinymce/plugins/paste/plugin.min.js"></script>
    <script src="/static/js/tinymce/plugins/spellchecker/plugin.min.js"></script>
    <script type="text/javascript" src="/static/js/ajaxfileupload.js"></script>
</head>
<body style="width:99%">
<div id="cont">
    <div style="height:100px;">
        <h1>文件管理页面</h1>
    </div>
    <div class="container-fluid">
       <div class="row" >
           <div class="col-sm-3 col-md-2">
                <ul class="nav nav-pills nav-stacked">
                   <li class="active"><a href="#">Home</a></li>
                    {% block content %}
                    {% for post in posts %}
                    <li><a onclick="chane(this)" path="{{ post.path }}" basepath="{{ post.path }}">{{ post.name }}<br>{{ post.path }}</a></li>
                    {% endfor %}
                    {% endblock %}
                </ul>
           </div>
           <div id="chan" class="col-xs-9 col-sm-10" onmousedown="closemune()" style="background:#ddddff;overflow:auto;color:black;font-size:18px;">
                 <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco
                    laboris nisi ut aliquip ex ea commodo consequat.
                 </p>
           </div>
       </div>
    </div>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
   aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close"
               data-dismiss="modal" aria-hidden="true">
                  &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">
               模态框（Modal）标题
            </h4>
         </div>
         <div id="myModalBody" class="modal-body">
            在这里添加一些文本
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default"
               data-dismiss="modal">关闭
            </button>
         </div>
      </div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="mkdir" tabindex="-1" role="dialog"
   aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close"
               data-dismiss="modal" aria-hidden="true">
                  &times;
            </button>
            <h4 class="modal-title" id="mkdirtitle">
               新建文件夹
            </h4>
         </div>
         <div id="mkdirbody" class="modal-body">
            文件夹名称：<input id="mkdirtext" type="text" />
         </div>
         <div class="modal-footer">
             <button onclick="mk(1)" type="button" class="btn btn-primary">新建
            </button>
            <button type="button" class="btn btn-default"
               data-dismiss="modal">关闭
            </button>
         </div>
      </div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>

<!-- 模态框（Modal） -->
<div style="display: none;" id="mkfile">
   <div class="modal-dialog" style="width: 80%">
      <div class="modal-content">
         <div class="modal-header">
            <h4 class="modal-title" id="mkfiletitle">
               新建文件
            </h4>
         </div>
         <div id="mkfilebody" class="modal-body">
            文件名称：<input id="mkfilename" type="text" /><br><br><br>
            内容：
             <button id="stmp" type="button" class="btn btn-primary">插入高亮代码</button>
             <button id="qiehuan" type="button" class="btn btn-primary">切换编辑框(切换之后将会转换html格式)</button>
             <button id="old" type="button" class="btn btn-primary">还原原本内容</button>
             <textarea id="mkfiletext" style="width: 80%;height: 400px;"></textarea>
         </div>
         <div class="modal-footer">
             <button onclick="mk(2)" type="button" class="btn btn-primary">新建/修改
            </button>
            <button onclick="closemkfile()" type="button" class="btn btn-default">关闭
            </button>
         </div>
      </div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>

<!-- 模态框（Modal） -->
<div style="display: none;position: absolute;right: 20px;float: right;width: 80%;top: 30px;" id="code">
   <div class="modal-dialog" style="width: 80%">
      <div class="modal-content">
         <div class="modal-body">
            语言：<input id="codename" type="text" /><br><br><br>
            内容：
             <textarea id="codetext" style="width: 80%;height: 400px;"></textarea>
         </div>
         <div class="modal-footer">
             <button onclick="addcode()" type="button" class="btn btn-primary">插入
            </button>
            <button onclick="closecode()" type="button" class="btn btn-default">关闭
            </button>
         </div>
      </div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>


<div style="display: none;width: 100px;background: white;border:1px solid #000;
    position: absolute;top: 100px;left: 200px;" id="mune">
            <ul class="nav nav-pills nav-stacked" style="width: 100%">
                <li style="width: 100%"><a style="width: 100%" onclick="del()" >删除</a></li>
                <li style="width: 100%"><a style="width: 100%" onclick="closemune()" >取消</a></li>
            </ul>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="alert" tabindex="-1" role="dialog"
   aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close"
               data-dismiss="modal" aria-hidden="true">
                  &times;
            </button>
            <h4 class="modal-title" id="alerttitle">
               模态框（Modal）标题
            </h4>
         </div>
         <div id="alerttext" class="modal-body">
            在这里添加一些文本
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default"
               data-dismiss="modal">关闭
            </button>
         </div>
      </div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="upload" tabindex="-1" role="dialog"
   aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close"
               data-dismiss="modal" aria-hidden="true">
                  &times;
            </button>
            <h4 class="modal-title" >
               Upload
            </h4>
         </div>
         <div class="modal-body">
                <p>File: <input id="uploadfile" type="file" multiple name="file"></p>
                <p><input id="uploadbutton" type="button" value="Upload"></p>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default"
               data-dismiss="modal">关闭
            </button>
         </div>
      </div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>

</body>
<script>
if (window.innerHeight)
       winHeight = window.innerHeight;
 else if ((document.body) && (document.body.clientHeight))
       winHeight = document.body.clientHeight;
$('#chan').css('height',winHeight-120);
    delfilename="";
    filetextold="";
    function del(){
        $.ajax({type:'post',url:"/files/delfile/",data:{'nowpath':$('#nowpath').html(),'filename':delfilename},success:function(result){
                showalert(result)
                fash()
                closemune();
          }});
    }
    function openmune(v){
        delfilename=trim($(v).text())
        //alert(delfilename)
        var e = event || window.event;
        var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
        var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
        var x = e.pageX || e.clientX + scrollX;
        var y = e.pageY || e.clientY + scrollY;
        $('#mune').css('top',y);
        $('#mune').css('left',x);
        $('#mune').css('display','block');
    }
    function closemune(){
        $('#mune').css('display','none');
    }
    function openmkfile(){
        tinyMCE.get('mkfiletext').hide();
        qiehuan=false;
        tinyMCE.get('mkfiletext').setContent("");
        mkfilename.value="";
        mkfiletext.value="";
        filetextold="";
        $('#mkfile').css('display','block');
        $('#cont').css('display','none');
    }
    function closemkfile(){
        $('#mkfile').css('display','none');
        $('#cont').css('display','block');
    }
    function fash() {
            $.ajax({type:'post',url:"/files/fileList/",data:{'path':$('#nowpath').html(),'basepath':""},success:function(result){
                $('#chan').html(result)
          }});
    }
function chane(t){
    closemune()
    if($(t).attr('file')=='true'){
        isfile(t)
        return
    }
    stmp=$(t).attr('basepath')
    if(stmp==undefined)
        stmp=""
    $.ajax({type:'post',type:'post',url:"/files/fileList/",data:{'path':$(t).attr('path'),'basepath':stmp},success:function(result){
            $('#chan').html(result)
          }});
    //alert(htmlobj.responseText)
}
function find(t){
    path=$(t).attr('path')
    split=$(t).attr('select')
    if(split=='home'){
        $.ajax({type:'post',url:"/files/find/",data:{'path':path,'select':split},success:function(result){
        $('#chan').html(result)
          }});
    }else if(split=='fist'){
        $.ajax({type:'post',url:"/files/find/",data:{'path':path,'select':split},success:function(result){
        $('#chan').html(result)
          }});
    }
}
    function isfile(t){
        $.ajax({type:'post',url:"/files/readfile/",data:{'path':$(t).attr('path')},success:function(result){
            //$('#myModalLabel').html($(t).attr('path'))
            //$('#mkfiletext').value=$(t).attr('path')
            mkfilename.value=trim($(t).text());
            tinyMCE.get('mkfiletext').hide();
            qiehuan=false;
            mkfiletext.value=result
            filetextold=result
            tinyMCE.get('mkfiletext').setContent(result)
            //$('#myModalBody').html(result)
            //alert(htmlobj.responseText)cont
            $('#mkfile').css('display','block');
            $('#cont').css('display','none');
          }});
    }
function mk(y) {
    if(y==1){
        if(mkdirtext.value==""){
            alert("文件夹名称不能为空")
            return
        }
       $.ajax({type:'post',url:"/files/mkdir/",data:{'nowpath':$('#nowpath').html(),'filename':mkdirtext.value},success:function(result){
            if(result=='ok'){
                showalert("新建成功")
                $.ajax({type:'post',url:"/files/fileList/",data:{'path':$('#nowpath').html(),'basepath':""},success:function(results){
                    $('#chan').html(results)
                    $('#mkdir').modal('hide')
                }});
            }else{
                showalert(result)
            }

        }});
    }else if(y==2){
        if(mkfilename.value==""){
            alert("文件名称不能为空")
            return
        }
        mkname=mkfilename.value
        if(qiehuan)
            mktext= tinyMCE.get('mkfiletext').getContent()
        else
            mktext= mkfiletext.value;
        $.ajax({type:'post',url:"/files/mkfile/",data:{'nowpath':$('#nowpath').html(),'mkname':mkname,'mktext':mktext},success:function(result){
            showalert(result)
            fash()
            $('#mkfile').css('display','none');
            $('#cont').css('display','block');

        }});
    }
}
    function trim(str){ //删除左右两端的空格
　　     return str.replace(/(^\s*)|(\s*$)/g, "");
　　 }

    tinymce.init({
		selector: "textarea#mkfiletext",
		theme: "modern",
        trim_span_elements:false,
        verify_css_classes:false,
        verify_html:false,
		plugins: [
			"advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker",
			"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
			"save table contextmenu directionality emoticons template textcolor paste fullpage textcolor colorpicker"
		],
		external_plugins: {
			//"moxiemanager": "/moxiemanager-php/plugin.js"
		},content_css: "css/development.css",
		add_unload_trigger: false,
		autosave_ask_before_unload: false,
		toolbar1: "save newdocument fullpage | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect",
		toolbar2: "cut copy paste pastetext | searchreplace | bullist numlist | outdent indent blockquote | undo redo | link unlink anchor image media help | insertdatetime preview | forecolor backcolor",
		toolbar3: "table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | spellchecker | visualchars visualblocks nonbreaking template pagebreak | insertfile insertimage code",
		menubar: false,
		toolbar_items_size: 'small',
            paste_auto_cleanup_on_paste: true,
            relative_urls: false,
            invalid_elements: 'script',
            statusbar: false,
            menubar : false,

			language:'zh_CN',

	});

     function showalert(v){
        $('#alerttitle').html('提示');
        $('#alerttext').html(v);
        $('#alert').modal('show');
     }
     window.onresize = function () {
        if (window.innerHeight)
               winHeight = window.innerHeight;
         else if ((document.body) && (document.body.clientHeight))
               winHeight = document.body.clientHeight;
        $('#chan').css('height',winHeight-120);
     }
    $('#stmp').click(function(){
        $('#code').css('display','block');
        codetext.value="";
    });

    $('#uploadbutton').click(function(){
        $.ajaxFileUpload({
            url:'upload',            //需要链接到服务器地址
            secureuri:false,
            fileElementId:'uploadfile',                        //文件选择框的id属性
            //dataType: 'xml',                                     //服务器返回的格式，可以是json
            success: function (data, status)            //相当于java中try语句块的用法
            {
                alert('上传成功');
                //fash();
            },
            error: function (data, status, e)            //相当于java中catch语句块的用法
            {
                alert('上传失败，'+data);
            }
            });
    });

qiehuan=true;
    $('#qiehuan').click(function() {
        //alert(tinyMCE.get('mkfiletext').getContent({format : 'text'}))
        if (qiehuan) {
            //$('#mkfiletext').show();
            tinyMCE.get('mkfiletext').hide();
            qiehuan=false;
        }else{
            //$('#mkfiletext').hide();
            tinyMCE.get('mkfiletext').show();
            qiehuan=true;
        }
    });

    function addcode(){
        //alert(importstr)
        if(codename.value=="")
            start='<textarea name="code" class="java" cols="100">';
        else
            start='<textarea name="code" class="'+codename.value+'" cols="100">';

        end='</textarea> ';
        text='\n/*  start '+codename.value+'  */\n'+codetext.value+'\n/*  end  */\n'
        //alert(tinyMCE.get('mkfiletext').getContent().indexOf('<link type="text/css" rel="stylesheet" href="/static/images/Styles/SyntaxHighlighter.css"></link> ')==-1)
        if(tinyMCE.get('mkfiletext').getContent()
                .indexOf('<link type="text/css" rel="stylesheet" href="/static/images/Styles/SyntaxHighlighter.css"></link> ')==-1) {
            tx=$.ajax({url:"/static/link.txt",async:false});
            importstr=tx.responseText;
            tinyMCE.get('mkfiletext').setContent(tinyMCE.get('mkfiletext').getContent() + importstr);
        }
        tinyMCE.get('mkfiletext').execCommand("mceInsertContent", false, start+text+end);
        closecode();
    }

    function closecode(){
        $('#code').css('display','none');
    }
    $('#old').click(function(){
        //alert(filetextold)
        tinyMCE.get('mkfiletext').hide();
        qiehuan=false;
        mkfiletext.value=filetextold;
    })
</script>
</html>
